<template>
    <div>

    </div>
</template>


<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "UserInfo",
    data() {
        return {
            user: {},            // 用户信息
            activeNameUserInfo: 'first',      //  tab绑定切换名称
            orders: [],      // 用户的订单
            products: [],      // 用户的收藏商品
            userId: '',

            currentPage: 1,         // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,            // 每页显示条数
            total: 0,               // 用户总数

        }
    },
    mounted() {
        this.$request.get('/user/userInfo' + '?id=' + this.$route.query.id).then(res => {
            if (res.code === '200') {

                this.user = res.data
                this.user.loginTime = this.timeFormate(this.user.loginTime)
                this.user.createTime = this.timeFormate(this.user.createTime)

            } else {
                this.$message.error(res.msg)
            }

        })
        this.userId = this.$route.query.id
        this.loadOrders()
    },
    methods: {


        // tab切换
        handleClickUserInfo(tab, event) {

            if (tab.index == 0) {
                // console.log("发起请求：TA的订单")
                //网络请求1
                this.loadOrders()
                // console.log(this.orders)
            } else if (tab.index == 1) {
                // console.log("发起请求：TA的收藏")
                //网络请求2
                this.loadFavorites()
                // console.log(this.products)
            } else {
                // console.log("发起请求：其他")
                //网络请求3
            }
        },

        loadOrders() {

            this.$request.get('/orders/loadUserOrders' + '?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&id=' + this.$route.query.id).then(res => {
                if (res.code === '200') {
                    this.orders = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        loadFavorites() {
            this.$request.post('/userFavoriteProduct/getFavoritesByUserId' + '?currentPage=' + this.currentPage
                + '&pageSize=' + this.pageSize + '&userId=' + this.userId).then(res => {
                if (res.code === '200') {
                    this.favorites = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            if (this.activeNameUserInfo === 'first') {
                this.loadOrders()
            } else if (this.activeNameUserInfo === 'second') {
                this.loadFavorites()
            }
        },


        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据
            if (this.activeNameUserInfo === 'first') {
                this.loadOrders()
            } else if (this.activeNameUserInfo === 'second') {
                this.loadFavorites()
            }
        },


        timeFormate(timestamp) {
            const date = new Date(timestamp);

            const year = date.getFullYear(); // 年份
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份，注意要加 1，且补零
            const day = String(date.getDate()).padStart(2, '0'); // 日期，补零
            const hours = String(date.getHours()).padStart(2, '0'); // 小时，补零
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟，补零
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒钟，补零

            const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return formattedDateTime;

        }
    }
})
</script>

<style>
</style>